<!--
 * @Author: jhw
 * @Date: 2025-08-07 21:32:59
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 10:36:32
 * @Description:
-->
<template>
  <div>
    <div class="survey-com-item-container pl-10px pr-10px mb-10px" @click="handleClick">
      {{ item.comName }}
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MaterialItem, Status, SurveyComName } from '@/types';
import type { PropType } from 'vue';
import { defaultStatusMap } from '@/configs/defaultStatus/defaultStatusMap';
import { useEditorStore } from '@/stores/useEditor';
import emitter from '@/utils/eventBus';
import { updateInitStatusBeforeAdd } from '@/utils';
import { useRoute } from 'vue-router';

const editorStore = useEditorStore();
const route = useRoute();
const type = route.query.type as string; // 问卷类型

const props = defineProps({
  item: {
    type: Object as PropType<MaterialItem>,
    required: true,
  },
});

const handleClick = () => {
  if (type === 'detail') return;
  const newName = props.item.materialName as SurveyComName;
  const defaultStatus = defaultStatusMap[newName]() as Status;
  updateInitStatusBeforeAdd(defaultStatus, newName);
  editorStore.addCom(defaultStatus);
  emitter.emit('scrollToBottom');
};
</script>

<style scoped lang="scss">
.survey-com-item-container {
  @apply w-90px h-30px select-none cursor-pointer flex justify-center items-center self-center;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  color: var(--font-color-light);
}
.survey-com-item-container:hover {
  background-color: var(--font-color-lightest);
}
</style>
